<template>
    <div class="demoIndex_box" ref="vantaRef">
    <div class="header-bar" :class="{ hidden: isHeaderHidden }">
      <div class="header_bar_item">
        <div class="header_bar_item_left">
          <img src="../knowledge_graph/components/KnowledgeGraphItem/images/applogo2.png" class="logo" alt="">
          <div class="logo_text">课程知识图谱</div>
        </div>
        <el-dropdown  @command="handleLogout">
          <div class="header_bar_item_right">
          <img
            src="../knowledge_graph/components/KnowledgeGraphItem/images/男头像.png"
            class="header_bar_item_right_img"
            alt="头像"
          />
          <div class="header_bar_item_right_text">{{ username }}</div>
        </div>
  <el-dropdown-menu  slot="dropdown">
    <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

      </div>
    </div>
      <div class="background-container">
      <div class="demoIndex_box_item_autoside">
        <div class="autoside_item_title_box">
          <div class="autoside_item_title">{{couresDetail.courseName  }}</div>
          <div class="aibox" ref="aiboxRef">
            <img src="../knowledge_graph/components/KnowledgeGraphItem/images/airobot2.png" class="aiboot" alt="ai出题" @click.stop="toggleAICards">
            <transition-group name="ai-card" tag="div" class="ai-card-group" v-if="showAICards">
              <div class="ai-card" @click.stop="gotoPractice(item)" v-for="(item, idx) in aiCardList" :key="item" :style="{ animationDelay: (idx * 0.3) + 's' }">
                <span>{{ item }}</span>
              </div>
            </transition-group>
          </div>
        </div>
          <div class="autoside_item_content">
            <div class="autoside_item_content_left">
              <div class="autoside_item_content_left_top">
                <div class="imgbox"><div class="imgbox_title">课程简介</div></div>
              </div>
              <div class="autoside_item_content_left_bottom">
              <div class="autoside_item_content_left_bottom_text" v-html="couresDetail.courseIntroduce">
              </div>
                <div class="video_name_box">
                  <video class="video_name_box_video" controls="controls">
                  <source
                    src="../knowledge_graph/components/KnowledgeGraphItem/video/wulihuaxue.mp4"
                    type="video/mp4"
                  />
                  </video>
                  <div class="right_name_box">
                    <div class="school">
                      <span class="label">学校：</span>
                      <el-tooltip 
                        effect="light"
                        content="哈尔滨工业大学"
                        placement="top"
                      >
                        <div class="school-info">
                        <img
                          src="../knowledge_graph/components/KnowledgeGraphItem/images/hagongda.png"
                          class="school-icon"
                        />
                          <span class="school-name">哈尔滨工业大学</span>
                        </div>
                      </el-tooltip>
                    </div>
                    <div class="teachers">
                      <span class="label">教师：</span>
                      <div class="teacher-list">
                        <el-tooltip 
                          v-for="(teacher, index) in teachers" 
                          :key="index"
                          effect="light"
                          :content="teacher.info"
                          placement="top"
                        >
                          <div class="teacher-item">
                          <img :src="teacher.avatar" class="teacher-avatar" />
                            <span class="teacher-name">{{ teacher.name }}</span>
                          </div>
                        </el-tooltip>
                      <div class="more-teachers" v-if="teachers.length > 5">
                        +{{ teachers.length - 5 }}
                      </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="autoside_item_content_right">
            <div
              v-for="item in tixiList"
              :key="item.name"
              class="red-btn"
              
            >
                <div class="red-btn_name">{{ item.name }}</div>
                <div>{{ item.number }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="demoIndex_box_item_autoside_item"></div>
      </div>
      <div class="top_tab">
      <div
        class="tab_bg"
        :style="{ left: `${activeIndex * (100 / 7)}%` }"
      ></div>
        <div
          :class="['tab_item', activeIndex == item.index ? 'active' : '']"
          @click="changeTab(item)"
          v-for="item in tabList"
          :key="item.index"
        >
          {{ item.name }}
        <img :src="item.img" class="tab_item_img">
      </div>
      </div>
      <div class="content-area">
        <CourseOverview v-if="activeIndex === 0" :courseDetail="couresDetail"/>
        <LessonPlan v-if="activeIndex === 1" :chapterTree="chapterTree"/>
        <ProgramResources v-if="activeIndex === 2" />
      <CourseVideo v-if="activeIndex === 3" :chapterTree="chapterTree"/>
      <ExperimentalVideo v-if="activeIndex === 4"/>
        <KnowledgeGraph v-if="activeIndex === 5" />
      <ExerciseDiagram v-if="activeIndex === 6" /> 
    </div>
    <div class="back-to-top" @click="scrollToTop" v-show="showBackToTop">
      <div class="back-to-top-content">
        <img
          src="../knowledge_graph/components/KnowledgeGraphItem/images/火箭.png"
          class="goto_top_img"
        />
      </div>
    </div>
    <div class="drawer" :class="{ 'drawer-show': showDrawer }">
      <div class="drawer-content">
        <div class="drawer-header">
          <i class="el-icon-close close-icon" @click="closeDrawer"></i>
        </div>
        <!-- <div class="drawer-body">
          <CourseOverview v-if="showContent=='课程概要'" :courseDetail="couresDetail"/>
          <LessonPlan v-if="showContent=='课程计划'" :chapterTree="chapterTree"/>
          <ProgramResources v-if="showContent=='课程资源'" />
          <ExperimentalVideo  v-if="showContent=='实验视频'"/>
        </div> -->
      </div>
    </div>
    <!-- 知识图谱树形弹框 -->
    <div v-if="showTreeDialog" class="custom-dialog-mask">
      <div class="custom-dialog">
        <div class="custom-dialog-inner">
          <div class="custom-dialog-title">
            <div>
              选择知识点出题
            </div>
            <span class="custom-dialog-close" @click="closeTreeDialog">×</span>
          </div>
          <div class="tree-container">
            <el-tree
              :data="treeData"
              :props="treeProps"
              :default-expanded-keys="defaultExpandedKeys"
              node-key="id"
              @node-click="handleNodeClick"
              @current-change="handleCurrentChange"
              ref="tree"
              :highlight-current="true"
              :expand-on-click-node="false"
              class="knowledge-tree"
            ></el-tree>
          </div>
          <div class="dialog-footer-fixed">
            <el-button type="primary" @click="handleConfirmNode" :disabled="!currentNodeId" v-if="currentNodeId">确认</el-button>
          </div>
        </div>
      </div>
    </div>
    </div>

  </template>
  
  <script>
import CourseVideo from "./components/CourseVideo.vue";
import KnowledgeGraph from "./components/KnowledgeGraph.vue";
import QuestionGraph from "./components/QuestionGraph.vue";
import ExerciseDiagram from "./components/ExerciseDiagram.vue";
import CourseOverview from "./components/CourseOverview/courseOverview"
import LessonPlan from "./components/CourseOverview/lessonPlan.vue"
import ProgramResources from "./components/CourseOverview/programResources.vue"
import ExperimentalVideo from "./components/CourseOverview/experimentalVideo.vue"
import * as THREE from "three";
import WAVES from "vanta/src/vanta.waves";
import courseRelated from "@/api/courseRelated";
import  knowledgeGraphs  from "@/api/knowledgeGraph";
import { getInfo } from "@/api/login";

  export default {
    components: {
      CourseVideo,
      KnowledgeGraph,
    QuestionGraph,
    ExerciseDiagram,
    CourseOverview,
    LessonPlan,
    ProgramResources,
    ExperimentalVideo
    },
    data() {
      return {
      couresDetail:{},//详情数据
      chapterTree: [], // 章节树数据
        activeIndex: 0,
      showBackToTop: false,
      showDrawer: false,
      showContent:null,
      username:null,
        tabList: [
        {
          index:0,
          name:'课程概要',
          img:require("../knowledge_graph/components/KnowledgeGraphItem/images/报告单.png")
        },
        {
          index:1,
          name:'课程计划',
          img:require("../knowledge_graph/components/KnowledgeGraphItem/images/备份信息.png")
        },
        {
          index:2,
          name:'课程资源',
          img:require("../knowledge_graph/components/KnowledgeGraphItem/images/文件管理.png")
        },
        {
            index: 3,
            name: "课程视频",
          img:require("../knowledge_graph/components/KnowledgeGraphItem/images/视频.png")
          },
        {
          index:4,
          name:'实验视频',
          img:require("../knowledge_graph/components/KnowledgeGraphItem/images/产品程序.png")
        },
          {
            index: 5,
            name: "知识图谱",
          img:require("../knowledge_graph/components/KnowledgeGraphItem/images/知识图谱.png")
          },
          {
            index: 6,
          name: "习题图谱",
          img:require("../knowledge_graph/components/KnowledgeGraphItem/images/问题图谱.png")
        },
      ],
      tixiList: [
        {
          name: "知识点",
          number: "600个知识点",
        },
        {
          name: "习题",
          number: "504个习题",
        },
        {
          name: "课程视频",
          number: "6个课程视频",
        },
        {
          name: "实验视频",
          number: "4个实验视频",
        },
        ],
        teachers: [
          {
          name: "张三",
          avatar: require("../knowledge_graph/components/KnowledgeGraphItem/images/男头像.png"),
          info: "张三教授，博士生导师，主讲物理化学课程20年...",
        },
        {
          name: "李四",
          avatar: require("../knowledge_graph/components/KnowledgeGraphItem/images/男头像.png"),
          info: "李四副教授，从事物理化学教学15年...",
        },
        {
          name: "王五",
          avatar: require("../knowledge_graph/components/KnowledgeGraphItem/images/男头像.png"),
          info: "王五讲师，物理化学教学骨干...",
        },
        {
          name: "刘阳",
          avatar: require("../knowledge_graph/components/KnowledgeGraphItem/images/男头像.png"),
          info: "刘阳助教，负责物理化学实验教学...",
        },
        ],
        isHeaderHidden: false,
      lastScrollPosition: 0,
      isAutoScrolling: false,
      showAICards: false,
      aiCardList: ['极速训练', '专项训练'],
      showTreeDialog: false,
      loading: false,
      treeData: [],
      treeProps: {
        label: 'label',
        children: 'children'
      },
      defaultExpandedKeys: [],
      currentNodeId: null,
      };
    },
    mounted() {
    this.initData();
      this.vantaEffect = WAVES({
        el: this.$refs.vantaRef,
        THREE: THREE,
        mouseControls: true,
    touchControls: true,
    gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
    waveSpeed: 0.55,
      zoom: 0.8,
    });
      
    window.addEventListener("scroll", this.handleScroll);
    // 添加点击事件监听器，用于关闭AI卡片
    document.addEventListener('click', this.handleDocumentClick);
    },
    beforeDestroy() {
      if (this.vantaEffect) {
      this.vantaEffect.destroy();
      }
      
    window.removeEventListener("scroll", this.handleScroll);
    // 移除点击事件监听器
    document.removeEventListener('click', this.handleDocumentClick);
    },
    methods: {
    //初始化接口数据
    initData(){
      getInfo().then((res)=>{
        this.username=res.user.userName;
        // console.log('getInfor',res.user.username);
      });
      
      // 使用getAllVideo API获取所有视频资源
      courseRelated.getAllVideo().then((res)=>{
        console.log('getAllVideo response:', res);
        
        if(res.data && Array.isArray(res.data)) {
          // 统计资源数量
          let videoCount = 0;
          let labCount = 0;
          
          res.data.forEach(item => {
            if(item.resourceCategory === 'video') videoCount++;
            if(item.resourceCategory === 'lab') labCount++;
          });
          // 更新tixiList中的资源数量
          this.tixiList = this.tixiList.map(item => {
            if(item.name === '课程视频') {
              return { ...item, number: `${videoCount}个课程视频` };
            } 
            else if(item.name === '实验视频') {
              return { ...item, number: `${labCount}个实验视频` };
            }
            return item;
          });
        } else {
          console.error('getAllVideo响应格式错误:', res);
        }
      }).catch(err => {
        console.error('获取视频资源失败:', err);
      });
      
      // 同时使用getCourseResource方法作为备份
      courseRelated.getCourseResource().then((res) => {
        console.log('getCourseResource response:', res);
        if(res.rows && Array.isArray(res.rows)) {
          let videoCount = 0;
          let labCount = 0;
          
          res.rows.forEach(item => {
            if(item.resourceCategory === 'video') videoCount++;
            if(item.resourceCategory === 'lab') labCount++;
          });
          
          console.log('getCourseResource统计结果: 课程视频数量 =', videoCount, '实验视频数量 =', labCount);
        }
      });
      
      courseRelated.getCourseRelatedInfo(1).then((res)=>{
        this.couresDetail=res.data;
      });
      courseRelated.getCourseChapterTree().then((res)=>{
        this.chapterTree = res.data;
      })
    },
    // 处理文档点击事件，关闭AI卡片
    handleDocumentClick(event) {
      // 如果AI卡片已显示，并且点击的不是aibox区域，则关闭AI卡片
      if (this.showAICards && this.$refs.aiboxRef && !this.$refs.aiboxRef.contains(event.target)) {
        this.showAICards = false;
      }
    },
    // 切换AI卡片显示状态
    toggleAICards() {
      this.showAICards = !this.showAICards;
    },
    // 切换tab
      changeTab(item) {
        this.activeIndex = item.index;
      },
      
      handleScroll() {
      const currentScroll =
        window.pageYOffset || document.documentElement.scrollTop;
        
        // 当滚动到200px时自动滚动到底部
        if (currentScroll >= 350 && !this.isAutoScrolling) {
          this.isAutoScrolling = true;
          const documentHeight = Math.max(
            document.body.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
          );
          
          window.scrollTo({
            top: documentHeight,
            behavior: 'smooth'
          });

          // 滚动完成后重置标志
          setTimeout(() => {
            this.isAutoScrolling = false;
          }, 1000);
        }
        
        if (currentScroll > 600) {
        this.isHeaderHidden = true;
        } else {
        this.isHeaderHidden = false;
      }

      this.showBackToTop = currentScroll > 300;
      this.lastScrollPosition = currentScroll;
    },
    scrollToTop() {
      this.isAutoScrolling = true;
      window.scrollTo({ 
        top: 0, 
        behavior: "smooth" 
      });
      
      // 滚动完成后重置状态
      setTimeout(() => {
        this.isAutoScrolling = false;
      }, 1000);
    },
    //点击功能卡片
    handleListCard(item) {
        this.showDrawer = true;
      if (item.name == "课程概要") {
        this.showContent="课程概要"
      }else if(item.name == "课程计划"){
        this.showContent="课程计划"
      }else if(item.name == "课程资源"){
        this.showContent="课程资源"
      }else if(item.name == "实验视频"){
        this.showContent="实验视频"
      }
    },
    closeDrawer() {
      this.showDrawer = false;
      this.showContent=null;
    },
    //退出登录
    handleLogout(command) {
      if(command=='loginout'){
        this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/login'
        })
      }).catch(() => {})


        // this.$router.push('/login');
      }
    },
    //AI训练跳转
    gotoPractice(item){
      if(item === '极速训练') {
        window.open('/ExaminationQuestions', '_blank');
      } else if(item === '专项训练') {
        this.showTreeDialog = true;
        this.loading = true;
        knowledgeGraphs.getKnowledgeGraph(1, 10).then(res => {
          // 递归过滤data.type为question的节点
          function filterQuestionNodes(nodes) {
            return nodes
              .filter(node => !(node.data && node.data.type === 'question'))
              .map(node => ({
                ...node,
                children: node.children ? filterQuestionNodes(node.children) : []
              }));
          }
          const rawData = res.data || [];
          const filteredData = filterQuestionNodes(rawData);
          this.treeData = filteredData;
          // 确保根节点有children字段
          if (this.treeData.length && !('children' in this.treeData[0])) {
            this.treeData[0].children = [];
          }
          this.defaultExpandedKeys = this.treeData.length ? [this.treeData[0].id] : [];
          this.currentNodeId = null;
          this.loading = false;
        }).catch(err => {
          console.error('获取树形数据失败:', err);
          this.loading = false;
        });
      }
    },
    closeTreeDialog() {
      this.showTreeDialog = false;
      this.treeData = [];
    },
    handleNodeClick(data) {
      console.log('节点被点击:', data);
      // 这里可以添加点击节点后的跳转逻辑
    },
    handleCurrentChange(data) {
      this.currentNodeId = data ? data.id : null;
    },
    handleConfirmNode() {
      if (this.currentNodeId) {
        this.showTreeDialog = false;
        window.open(`/ExaminationQuestions?nodeId=${this.currentNodeId}`, '_blank');
      }
    },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .demoIndex_box {
    width: 100%;
    height: 100%;
    min-height: 100vh;
  background: rgb(201, 214, 255);
  background: linear-gradient(
    90deg,
    rgba(201, 214, 255, 1) 0%,
    rgba(226, 226, 226, 1) 100%
  );
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    padding-top: 60px;
    
    &::before {
    content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.2);
      z-index: 1;
    }
  
    & > * {
      position: relative;
      z-index: 2;
    }
  
    .top_tab {
      position: relative;
      width: calc(100% - 200px);
      height: 50px;
      display: flex;
      padding: 0;
      margin-left: 100px;
      margin-top: 100px;
      border-radius: 20px;
      background-color: rgba(242, 242, 242, 0.25);
      backdrop-filter: blur(9px);
      border: 0px solid rgba(255, 255, 255, 0.18);
      box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
      color: rgba(255, 255, 255, 0.45);
      font-size: 16px;
      font-weight: bold;
      
      .tab_bg {
        position: absolute;
        width: calc(100% / 7);
        height: 100%;
        background-color: #fff;
        border-radius: 20px;
        transition: left 0.3s ease-in-out;
        z-index: 1;
      }
      
      .tab_item {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: calc(100% / 7);
        text-align: center;
        height: 100%;
        line-height: 50px;
        cursor: pointer;
        color: black;
        z-index: 2;
        transition: color 0.3s ease-in-out;
      }
    }
    
    .content-area {
      // padding-top: 20px;
      background-color: #f5f6fb;
      // border-radius: 10px;
      margin: 10px 100px;
      height: calc(100vh - 70px);
      box-sizing: border-box;
      overflow-y: hidden;
      border-radius: 20px;
    }
  }
  .active {
    color: black;
    font-weight: bold;
  }
  
  .demoIndex_box_item_autoside {
    width: 100%;
    height: 525px;
    box-sizing: border-box;
  padding: 60px 100px;
  
    position: relative;
    z-index: 2;
  }
  
  .autoside_item_title_box{
    width: 100%;
    display: flex;
    justify-content: space-between;

  }
  .aibox{
    width: 80px;
    height: 80px;
    position: relative;
    cursor: pointer;
    .bubble {
      position: absolute;
left: -60px;
    text-align: center;
    top: -25px;
      min-width: 70px;
      padding: 8px 16px;
      background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
color: rgba(255, 255, 255, 0.75);
      border-radius: 20px;
      font-size: 16px;
      font-weight: bold;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      z-index: 101;
    }
    .aiboot{
      width: 170px;
      height: 180px;
      position: absolute;
      top: -40%;
      left: -30%;
      z-index: 100;
    }
  }
  .demoIndex_box_item_autoside_item {
    width: 100%;
    height: 525px;
  
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  .background-container {
    position: relative;
    width: 100%;
    height: 525px;
  }
  .autoside_item_title {
    width: 100%;
    height: 67px;
    font-size: 38px;
    font-weight: bold;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
    1px 1px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
      2px 2px 0 #fff;
    color: #000;
  }
.autoside_item_content {
    width: 100%;
    height: 464px;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
  }
.autoside_item_content_left {
    width: 48%;
    height: 100%;
    
    // background-color: #fff;
  }
.autoside_item_content_right {
    width: 48%;
    height: 100%;
    border-radius: 15px;
    padding-top: 85px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    perspective: 1000px;
  }
.autoside_item_content_left_top {
    width: 100%;
    height: 48px;
    display: flex;
    align-content: center;
  }
.autoside_item_content_left_bottom {
    width: 100%;
    height: calc(100% - 48px);
    box-sizing: border-box;
    padding: 25px;
  padding-top: 10px;
  background: rgb(52, 159, 224);
  background: linear-gradient(
    0deg,
    rgba(52, 159, 224, 1) 0%,
    rgba(255, 255, 255, 0.9752275910364145) 55%
  );
    border-radius: 15px;
    border-top-left-radius: 0;
  }
.imgbox {
    width: 224px;
    height: 48px;
  background-image: url("../knowledge_graph/components/KnowledgeGraphItem/images/111.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
.right_imgbox {
    width: calc(100% - 224px);
    height: 48px;
    position: relative;
  }
.imgbox_img {
    position: absolute;
      width: 37vw;
      height: 5.20833vw;
      bottom: 1px;
      left: -32px;
      transform: translateY(42%);
      mix-blend-mode: multiply;
      pointer-events: none;
  }
.imgbox_title {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-right: 40px;
    text-align: center;
    line-height: 48px;
    font-weight: bold;
    font-size: 22px;
  }
.autoside_item_content_left_bottom_text {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
  line-height: 1.7;
    color: #000;
    font-family: "Microsoft YaHei";
  }
  .red-btn {
    position: relative;
    width: 350px;
    height: 150px;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
    border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgb(144, 228, 228) 0%,
    rgb(127, 129, 214) 100%
  );
    box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, 
                rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
  }
  
  // 玻璃效果层
  .red-btn::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 20px;
  background: linear-gradient(
    0deg,
      rgba(255, 255, 255, 0.349) 0%, 
      rgba(255, 255, 255, 0.815) 100%
    );
    backdrop-filter: blur(5px);
    border-top-right-radius: 100%;
    transform: translate3d(0px, 0px, 25px);
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.5s ease-in-out;
  }
  
  // 内容容器
  .red-btn > div {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, 0, 26px);
    transition: all 0.5s ease-in-out;
  }
  
  .red-btn_name {
    color: #00894d;
    font-weight: 900;
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .red-btn div:last-child {
    color: rgba(0, 137, 78, 0.76);
    font-size: 18px;
    font-weight: 600;
  }
  
  // 圆形装饰
  .red-btn::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: translate3d(0, 0, 50px);
    transition: all 0.5s ease-in-out;
  }
  
  // 悬浮效果
  .red-btn:hover {
    transform: rotate3d(1, 1, 0, 20deg);
    box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px,
                rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
  }
  
  .red-btn:hover::before {
    transform: translate3d(0, 0, 35px);
    border-top-right-radius: 80%;
  }
  
  .red-btn:hover::after {
    transform: translate3d(0, 0, 80px);
    width: 60px;
    height: 60px;
    right: 25px;
    top: 25px;
  }
  
  .red-btn:hover > div {
    transform: translate3d(0, 0, 45px);
  }
.video_name_box {
    width: 100%;
    height: 228px;
    display: flex;
    // margin-top: 10px;
    justify-content: space-between;
    align-items: center;
  .video_name_box_video {
      width: 45%;
    height: 100%;
    }
  }
  .right_name_box {
    width: 45%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    .school {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      width: 80%;
      justify-content: flex-start;
  
      .label {
        font-size: 18px;
        font-weight: bold;
        color: #666;
        margin-right: 10px;
      }
  
      .school-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        
        .school-icon {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }
  
        .school-name {
          font-size: 16px;
          color: #333;
        }
      }
    }
  
    .teachers {
      width: 80%;
  
      .label {
        font-size: 18px;
        font-weight: bold;
        color: #666;
        margin-bottom: 15px;
        display: inline-block;
      }
  
      .teacher-list {
        display: flex;
        gap: 15px;
        align-items: center;
      }
  
      .teacher-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        cursor: pointer;
  
        .teacher-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-bottom: 8px;
        }
  
        .teacher-name {
          font-size: 16px;
          color: #333;
        }
      }
  
      .more-teachers {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f5f5f5;
        color: #666;
        font-size: 16px;
      }
    }
  }
  
  .header-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 60px;
  padding: 0 20px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease;
    
    &.hidden {
      transform: translateY(-100%);
  }
  .header_bar_item {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0 30px;
    justify-content: space-between;
    align-items: center;
    .header_bar_item_right {
      width: 100px;
      height: 100%;
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      .header_bar_item_right_img {
        width: 40px;
        height: 40px;
        margin-right: 15px;
      }
      .header_bar_item_right_text {
        font-size: 18px;
        color: #333;
      }
    }
  }
}

.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;

  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  .back-to-top-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .goto_top_img {
      width: 30px;
      height: 30px;
    }
  }
}
.drawer {
  position: fixed;
  bottom: -100vh;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  border-top-left-radius:50px;
  border-top-right-radius:50px;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.4s ease-in-out;
  z-index: 2000;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);

  &.drawer-show {
    transform: translateY(-100vh);
  }

  .drawer-content {
    width: 100%;
    height: 100%;
    position: relative;

    .drawer-header {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .close-icon {
        font-size: 24px;
        color: #666;
        cursor: pointer;
        transition: color 0.4s ease;

        &:hover {
          color: #333;
        }
      }
    }

    .drawer-body {
      width: 100%;
      height: calc(100% - 70px);
      overflow-y: auto;
    }
  }
}
.tab_item_img{
  width: 25px;
  height: 25px;
  margin-left: 10px;
  }
  .header_bar_item_left{
    width: auto;
    display: flex;
    align-items: center;
    .logo{
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.logo_text{
  font-size: 26px;
  font-weight: bold;
  color: #fff;
}
    }
  </style>
  
  <style lang="scss">
  // 全局滚动条样式
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: block;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #dedede;
    border-radius: 3px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #cdcdcd;
  }


  </style>
  
  <style>
  .ai-card-group {
    position: absolute;
    right: 65px;
    top: 50px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    z-index: 102;
  }
  .ai-card {
    min-width: 110px;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    border-radius: 21px;
    color: #292929;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transform: translateX(60px) scale(0.95);
    animation: aiCardIn 0.7s cubic-bezier(.68,-0.55,.27,1.55) forwards;
    margin: 0 8px;
    letter-spacing: 2px;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ai-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
      #a770ef,
      #1cefff,
      #a770ef,
      #1cefff
    );
    background-size: 400% 400%;
    border-radius: 23px;
    z-index: -1;
    animation: none;
    transition: 0.5s;
    opacity: 0;
  }

  .ai-card:hover::before {
    opacity: 1;
    animation: borderRotate 3s ease alternate infinite;
  }

  .ai-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    border-radius: 21px;
    z-index: -1;
  }

  @keyframes borderRotate {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  @keyframes aiCardIn {
    0% {
      opacity: 0;
      transform: translateX(60px) scale(0.95);
    }
    60% {
      opacity: 1;
      transform: translateX(-10px) scale(1.05);
    }
    100% {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
  }
  .aiboot {
    transition: transform 0.3s cubic-bezier(.68,-0.55,.27,1.55);
  }
  .aiboot:hover {
    transform: scale(1.08);
  }
  </style>
  
  <style lang="scss" scoped>
  .custom-dialog-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.25);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .custom-dialog {
width: 650px;
    height: 550px;
    background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
    border-radius: 20px;
    transition: all 0.3s;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  }
  .custom-dialog-inner {
    width: 630px;
    height: 580px;
    background: #fff;
    border-radius: 20px;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .custom-dialog-title {
    font-size: 18px;
    font-weight: bold;
    padding: 18px 24px 10px 24px;
    border-radius: 20px 20px 0 0;
    color: #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .custom-dialog-close {
    font-size: 22px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
  }
  .custom-dialog-close:hover {
    color: #f56c6c;
  }
  .tree-container {
    flex: 1;
    max-height: 480px;
    overflow-y: auto;
    padding: 0 24px;
  }
  .dialog-footer-fixed {
    padding: 12px 24px 18px 24px;
    text-align: right;
    background: #fff;
    border-radius: 0 0 20px 20px;
  }
  // 节点字体大小
  ::v-deep .el-tree-node__label {
    font-size: 16px;
  }
 
  </style>
  